<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bs/css/bootstrap.css">
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 挂载点 -->
    <div id="app"></div>
    <!-- 试图 -->
    <template id="tem1">
        <div class="container">
            <!-- 表单开始 -->
            <div class="form-group">
                <label for="exampleInputEmail1">名字</label>
                <input type="text" placeholder="请输入名字" v-model="name">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">电话</label>
                <input type="text" placeholder="请输入电话" v-model="tel">
            </div>
            <button type="submit" class="btn btn-info" @click="btn()" v-show="xxx">添加</button>
            <button type="submit" class="btn btn-info" @click="btn4(index)" v-show="!xxx">修改</button>
            <button type="submit" class="btn btn-danger" @click="btn1()">重置</button>
            <br><br><br>
            <!-- 表单结束 -->
            <!-- 表格开始 -->
            <table class="table">
                <tr>
                    <th>编号</th>
                    <th>名字</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in arr" :key="index">
                    <td>{{ index+1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.tel }}</td>
                    <td>
                        <button type="submit" class="btn btn-danger" @click="btn2(index)">删除</button>
                        <button type="submit" class="btn btn-warning" @click="btn3(index)">修改</button>
                    </td>
                </tr>
            </table>
            <div v-if="arr.length<=0">暂无数据</div>
            <button type="submit" class="btn btn-danger" @click="btn5()" v-if="arr.length>=1">全部删除</button>
            <!-- 表格结束 -->
        </div>
    </template>
</body>
<script>
    new Vue({
        el: '#app',
        template: '#tem1',
        data: {
            name: '',
            tel: '',
            arr: [],
            index: null,
            xxx: true
        },
        methods: {
            // 添加按钮
            btn(e) {
                if (this.name === '' && this.tel === '') {
                    return alert('请填写完整内容')
                }
                this.arr.push({
                    name: this.name,
                    tel: this.tel
                });
                // 清空表单数据
                this.name = '';
                this.tel = '';
            },
            // 重置按钮
            btn1(e) {
                this.arr.name = '';
                this.arr.tel = '';
            },
            btn2(index1) {
                this.index = index1
                this.arr.splice(index1, 1)
            },
            // 修改
            btn3(index2) {
                this.index = index2
                this.xxx = false
                this.name = this.arr[index2].name
                this.tel = this.arr[index2].tel
            },
            btn4(index3) {
                this.index = index3
                // this.arr[index3].length = 0
                this.arr[this.index].name = this.name
                this.arr[this.index].tel = this.tel
            },
            btn5(){
                this.arr=[]
            }
        }
    })
</script>

</html>